<template>
  <div class="map-wrap">
    <div class="mapCenter">

      <div class="opration-top">
        <p class="refrashDate" v-if="!displayphone">
          <!-- <span @click="backMap">全国</span>
          <span @click="backMap" v-if="!firstRender && third == false">-江苏省分行</span>
          <span @click="backMap" v-if="!firstRender && isShowcity == true">-无锡市分行</span>
          <span>档案中心</span> -->
          <span>智能档案库综合监管平台</span>
        </p>
      </div>
      <!-- 按钮 -->
      
      <div id="container"></div>
    </div>
  </div>
</template>

<script>
import './mapChart.scss'

let baseUrl
let echarts = require("echarts/lib/echarts");
import $ from "jquery";
import { geoCoordMap, GZData } from "./myMap-CCB";
import { provinces, cityMap, special } from "./common";
require("echarts/lib/chart/map");
require("echarts/map/js/china");
let myChart;
let provincesName = "";
let mapStack = [];
//排序数据
let sortData = [];
let areaList = [];
//排序后的标题
let titledata = [];
let mapName = "中国";
import { baseEnv } from "@/request";

export default {
  name: "mapChart",
  data() {
    return {
      areaList: areaList,
      dt: new Date(),
      focused: false,

      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      second: false,
      mapChina: [],
      firstRender: true,
      isShowcity: false,
      third: false,
      curMap: {},
 

    };
  },
  mounted() {
    if (baseEnv == "development") {
      baseUrl = "/api";
    } else {
      baseUrl = "https://overall.qcdoc.cn/";
    }
    // 初始化加载
    this.mapChart();
    // this.$nextTick(function() {
    //   this.$refs.fieldSelect.$refs.scrollbar.$el.classList.add(
    //     "scroll-opacity"
    //   );
    // });
  },
  methods: {



    // 返回全国视图
    backMap() {
      //获取上一级地图信息
      let map = mapStack.pop();
      if (mapStack.length == 0) {
        this.$emit("changAllData");
        myChart.clear();
        myChart.off("click");
        myChart.off("contextmenu");
        this.firstRender = true;
        this.second = false;
        this.third = false;
        this.isShowcity = false;
        setTimeout(() => {
          this.mapChart();
        }, 0);
        return;
      }
      if (mapStack.length == 1) {
        provincesName = map.provincesName;
        this.isShowcity = false;
      }
      this.$echarts.registerMap(map.mapName, map.mapJson);
      sortData = map.sortData;
      titledata = map.titledata;
      this.initEcharts(map.mapName, map.mapJson, map.sortData, false); //map.mapchin是data数据

      if (!map) {
        console.log("没有入栈数据了");
        return;
      }
    },
    //配置渲染map
    mapChart() {
      myChart = echarts.init(document.getElementById("container"));
      myChart.showLoading();
      document.getElementById("container").oncontextmenu = function() {
        return false;
      };
      window.addEventListener("resize", () => {
        myChart.resize();
      });
      // 第一次渲染地图province/jiangsu
      $.getJSON(`/map/china.json`, (data) => {
        console.log(data, `zzvvzz*****/map/china.json`);
        this.mapChina = data;
        myChart.hideLoading();
        let mapJsonData = [];
        for (var i = 0; i < data.features.length; i++) {
          mapJsonData.push({
            id: data.features[i].id,
            name: data.features[i].properties.name,
          });
        }
        echarts.registerMap(mapName, data);
        /**获取省份数据*/
        this.renderPrimaryMap(mapJsonData, true);
      });
      // 市
      var that = this;

      // 点击触发
      myChart.on("click", (param) => {
        console.log('全部内容', param)
        provincesName = provinces[param.name] || cityMap[param.name];
        if (param.componentSubType == "scatter" && this.isShowcity) {
          let routeData = this.$router.resolve({
            path: "/about",
            query: {
              title: "南京市"
            }
          });
          window.open(routeData.href, "_blank");
        }
        this.firstRender = false;
        console.log(param.data, 'param.dataparam.data')
        if (param.data) {
          if (!(param.data.id || param.data.cityid)) {
            // 有省id，市id才有下一级
            console.error("该地图没有下一级地区了");
            return;
          }
        } else {
          return;
        }
        if (param.name in provinces) {
          this.$emit("changeCityData");
          this.second = true;
          if (param.name == "江苏" || param.name == "安徽") {
            /**
             * 绑定数据入栈事件
             */
            let n = 1;
            if (special.indexOf(param.name) == -1) {
              n = 2; //2层
            }
            // FiXED:  2级下钻会有问题， 函数顶部加入下钻层级判断
            if (mapStack.length < n) {
              //   //将上一级地图信息压入mapStack
              mapStack.push({
                mapName: this.curMap.mapName,
                mapJson: this.curMap.mapJson, // mapJson
                sortData: this.curMap.sortData, // sortData
                titledata: this.curMap.titledata,
                provincesName: this.curMap.provincesName
              });
            }
          }
          // 下钻一层
          //直辖市和特别行政区-只有二级地图，没有三级地图
          if (special.indexOf(param.name) >= 0) {
            showProvince(param);
          } else {
            showProvince(param);
          }
        } else {
          // 显示县级地图
          // this.third = true;
          if (param.name == "南京市") {
            this.isShowcity = true;
            showCitys(param);
            /**
             * 绑定数据入栈事件
             */
            let n = 1;
            if (special.indexOf(param.name) == -1) {
              n = 2; //2层
            }
            // FiXED:  2级下钻会有问题， 函数顶部加入下钻层级判断
            if (mapStack.length < n) {
              //   //将上一级地图信息压入mapStack
              mapStack.push({
                mapName: this.curMap.mapName,
                mapJson: this.curMap.mapJson, // mapJson
                sortData: this.curMap.sortData, // sortData
                titledata: this.curMap.titledata,
                provincesName: this.curMap.provincesName,
              });
            }
          }
        }
      });
      myChart.on("contextmenu", () => {
        this.backMap();
        return false;
      });
      //异步展示地图
      //展示对应的省
      function showProvince(param) {
        // if (param.name == "江苏" || param.name == "安徽") {
          $.getJSON(
            `/map/province/${provinces[param.name]}.json`,
            (data) => {
              that.mapChina = data;
              that.$echarts.registerMap(param.name, data);
              let mapJsonData = [];
              for (var i = 0; i < data.features.length; i++) {
                // 读取地图的 name 用来组成 echart 需要的形式
                mapJsonData.push({
                  name: data.features[i].properties.name,
                  value: Math.floor(Math.random() * 10000),
                });
              }
              that.initEcharts(param.name, mapJsonData, null, false);
              if (param.data.id !== "undifiend") {
                that.getCityNumber(param.name, param.data.id, that.mapChina);
              }
            }
          );
        // } else {
        //   that.$message("当前城市暂未开拓");
        //   return;
        // }
      }

      //展示对应市
      function showCitys(param) {
        // 显示县级地图
        if (param.name == "南京市") {
          $.getJSON(
            `/map/city/${cityMap[param.name]}.json`,
            (data) => {
              that.mapChina = data;
              that.$echarts.registerMap(param.name, data);
              let mapJsonData = [];
              that.$echarts.registerMap(param.name, data);
              for (var i = 0; i < data.features.length; i++) {
                // 读取地图的 name 用来组成 echart 需要的形式
                mapJsonData.push({
                  name: data.features[i].properties.name,
                });
              }

              // if (that.second) {
              //   that.initEcharts(param.name, mapJsonData, null, false);
              // } else {
              that.initEcharts(param.name, mapJsonData, null, false);
              // }
              //  if (param.data.cityid) {
              // let postData3 = {
              //   parentid: 'cityid',
              //   value: params.data.cityid,
              // }
              //这里传递的城市名有问题“北京市”，渲染地图的名字是“北京”，所以地图名要用原来的名字渲染
              // that.getAreaNumber(param.name, param.data.cityid, data)
              // }
            }
          );
        } else {
          that.$message("当前城市暂未开拓");
          return;
        }
      }
    },
    // 地图载入
    initEcharts(mapTitle, mapJson, customerNum, status = false) {

      console.log(this.firstRender, mapTitle, mapJson, customerNum, status, '是地图入门')
      var objArr = [];
      let geo = {};
      if (this.firstRender) {
        this.renderScatter("china");
        var color = [
          "#f0814dea",
          "#f0814dea",
          "#f0814dea",
          "#f0814dea",
          "#f0814dea",
          "#f0814dea",
        ];
        console.log(GZData, '哈哈哈哈哈')
        [["江苏", GZData]].forEach(function(item, i) {
          console.log(item, i, 'zeep')
          objArr.push(
            // 涟漪散点图
            {
              name: item[0],
              type: "effectScatter",
              coordinateSystem: "geo",
              zlevel: 2,
              rippleEffect: {
                brushType: "stroke",
              },
              label: {
                normal: {
                  show: true,
                  position: "right",
                  formatter: "{b}",
                },
              },
              symbolSize: function(val) {
                return val[2] / 8;
              },
              itemStyle: {
                normal: {
                  color: color[i],
                },
              },
              data: item[1].map(function(dataItem) {
                return {
                  name: dataItem[1].name,
                  value: geoCoordMap[dataItem[1].name].concat([
                    dataItem[1].value,
                  ]),
                };
              }),
            }
          );
        });

      }
      if (this.second && !this.firstRender) {
        this.renderCityScatter();
        if (!this.third) {
          // 第二层
          this.renderCityScatter();
          var chinaGeoCoordMap = {
            // 经纬度
            南京市: [118.773101, 32.06759],
            宿迁市: [118.287324, 33.970145],
            扬州市: [119.428622, 32.403603],
            南通市: [120.900441, 31.994389],
            泰州市: [119.926122, 32.464087],
          };
          var chinaDatas = [
            //航线条数
            [
              {
                name: "宿迁市",
                value: 0,
              },
            ],
            [
              {
                name: "扬州市",
                value: 0,
              },
            ],
            [
              {
                name: "南通市",
                value: 0,
              },
            ],
            [
              {
                name: "泰州市",
                value: 0,
              },
            ],
          ];
          var convertDataPro = function(data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
              var dataItem = data[i];
              var fromCoord = chinaGeoCoordMap[dataItem[0].name];
              var toCoord = [118.773101, 32.06759]; //目的地
              if (fromCoord && toCoord) {
                res.push([
                  {
                    coord: fromCoord,
                    value: dataItem[0].value,
                  },
                  {
                    coord: toCoord,
                  },
                ]);
              }
            }
            return res;
          };
          objArr = [];
          geo = {
            geo: {
              show: true,
              map: provincesName,
              label: {
                normal: {
                  show: false,
                  textStyle: {
                    color: "#ddd",
                  },
                },
                emphasis: {
                  textStyle: {
                    color: "#000",
                  },
                },
              },
              roam: false,
              itemStyle: {
                normal: {
                  areaColor: "#5ab1ef", //地图块颜色#DCE2F1  浅蓝#2B91B7
                  borderColor: "#EBEBE4", //#EBEBE4灰色
                  borderWidth: 0.5,
                },
                emphasis: {
                  areaColor: "rgba(43, 196, 243, 0.42)", //s鼠标放上去，地图块高亮显示的颜色
                },
              },
            },
          };
          var symbolImg2 = "image://" + require("@/assets/logo.png");
          var symbolImgPlane = "image://" + require("@/assets/wuliuche.png");
          [["南京市", chinaDatas]].forEach(function(item) {
            objArr.push(
              {
                type: "lines",
                zlevel: 2,
                effect: {
                  show: true,
                  period: 5, //箭头指向速度，值越小速度越快
                  trailLength: 0, //特效尾迹长度[0,1]值越大，尾迹越长重
                  symbol: symbolImgPlane, //箭头图标
                  // symbol: "arrow", //箭头图标
                  symbolSize: 20, //图标大小
                },
                lineStyle: {
                  normal: {
                    width: 1, //尾迹线条宽度
                    opacity: 1, //尾迹线条透明度
                    curveness: 0.3, //尾迹线条曲直度
                    color: "#f0814dea",
                  },
                },
                data: convertDataPro(item[1]),
              },
              {
                type: "effectScatter",
                coordinateSystem: "geo",
                zlevel: 2,
                rippleEffect: {
                  //涟漪特效
                  period: 20, //动画时间，值越小速度越快
                  brushType: "stroke", //波纹绘制方式 stroke, fill
                  scale: 0, //波纹圆环最大限制，值越大波纹越大
                },
                label: {
                  normal: {
                    show: true,
                    position: "right", //显示位置
                    offset: [5, 0], //偏移设置
                    formatter: function(params) {
                      //圆环显示文字
                      return params.data.name;
                    },
                    fontSize: 13,
                  },
                  emphasis: {
                    show: true,
                  },
                },
                symbol: "circle",
                symbolSize: function(val) {
                  return 5 + val[2] * 5; //圆环大小
                },
                itemStyle: {
                  normal: {
                    show: false,
                    color: "#f00",
                  },
                },
                data: item[1].map(function(dataItem) {
                  return {
                    name: dataItem[0].name,
                    value: chinaGeoCoordMap[dataItem[0].name].concat([
                      dataItem[0].value,
                    ]),
                  };
                }),
              },
              //被攻击点
              {
                type: "scatter",
                coordinateSystem: "geo",
                zlevel: 2,
                rippleEffect: {
                  period: 4,
                  brushType: "stroke",
                  scale: 4,
                },
                label: {
                  normal: {
                    show: true,
                    position: "right",
                    //offset:[5, 0],
                    color: "#0f0",
                    formatter: "{b}",
                    textStyle: {
                      color: "#0f0",
                    },
                  },
                  emphasis: {
                    show: true,
                    color: "#f60",
                  },
                },
                symbol: symbolImg2,
                symbolSize: 50,
                data: [
                  {
                    name: item[0],
                    value: chinaGeoCoordMap[item[0]].concat([10]),
                  },
                ],
              }
            );
          });
        }
      }
      let series = [];
      series = [
        ...objArr,
        {
          name: mapTitle, //上面的下钻用到seriesName绑定下一级，换name绑定
          type: "map",
          geoIndex: 0,
          map: mapTitle,
          // roam: false,
          height: "100%",
          zoom: 1,
          itemStyle: {
            normal: {
              areaColor: "#5ab1ef", //地图块颜色#DCE2F1  浅蓝#2B91B7
              borderColor: "#EBEBE4", //#EBEBE4灰色
            },
            emphasis: {
              areaColor: "rgba(43, 196, 243, 0.42)", //s鼠标放上去，地图块高亮显示的颜色
            },
          },
          data: customerNum,
        },
      ];
      let option = {
        ...geo,
        series: series,
        // 初始动画的时长，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果：
        animationDuration: 1000,
        animationEasing: "cubicOut",
        // 数据更新动画的时长。
        animationDurationUpdate: 1000,
      };
      if (status) {
        myChart.setOption(option);
        // myChart.setOption(
        //   option,
        //   {
        //     replaceMerge: ["geo"],
        //   },
        //  false
        // );
      } else {
        myChart.setOption(option);
      }
      this.curMap = {};
      this.curMap = {
        mapName: mapTitle, //地图名称
        mapJson: mapJson, // 地图的json数据
        mapChina: this.mapChina,
        sortData: sortData, // 排序后的json数据
        titledata: titledata, // 地图名称下对应的地理名数组
        provincesName: provincesName,
      };
    },
    // 渲染二级地图，城市
    renderPrimaryMap(result, flag) {
      let tmp = [];
      if (flag) {
        result.forEach((item) => {
          tmp.push({
            id: item.id,
            name: item.name,
            value: Math.floor(Math.random() * 100 + parseInt(item.id)),
          });
        });
      }
      //获取最大值，并排序
      let maxData = this.getMaxDataAndSort(tmp);
      maxData;
      //绘制地图，拿到数据后再渲染一次
      this.initEcharts(mapName, this.mapChina, tmp, false);
    },
    setAreaList(data) {
      this.areaList = data; // vue是这样写的，内部有代理
    },
    getMaxDataAndSort(originData) {
      if (originData == "undefined") {
        return;
      }
      titledata = [];
      sortData = [];
      sortData = originData.sort(this.numDescSort);
      let maxData = sortData.slice(-1)[0]["value"];
      let maxDataId = sortData.slice(-1)[0]["id"];
      if (!maxDataId) {
        maxDataId = sortData.slice(-1)[0]["cityid"]
          ? sortData.slice(-1)[0]["cityid"]
          : sortData.slice(-1)[0]["areaid"];
      }
      for (let i = 0; i < sortData.length; i++) {
        titledata.push(sortData[i].name);
      }
      areaList = [...sortData].reverse();
      this.setAreaList(areaList);
      return {
        maxDataId,
        maxData,
      };
    },
    numDescSort(a, b) {
      return a["value"] - b["value"];
    },
    stringToJson(data) {
      let result = Object.create(null);
      if (Object.prototype.toString.call(data) !== "[object Object]") {
        try {
          result = JSON.parse(data);
        } catch {
          throw TypeError("数据转换成JSON出错");
        }
      }
      return result;
    },
    getCityNumber(name, id, data) {
      if (!id) {
        return;
      }
      // let postData2 = {
      //   parentid: 'provinceid',
      //   value: id,
      // }
      this.renderSecondMap(name, data, true);
    },
    renderSecondMap(eName, resp, flag = false) {
      let tmp = [];
      if (flag) {
        resp.features.forEach((item) => {
          tmp.push({
            //需要加上cityid传递渲染，下一级地图渲染需要用到，点击的时候有判断，没有下级id直接return
            cityid: item.id,
            name: item.properties.name,
            value: item.properties.childNum
          });
        });
      }
      let maxData = this.getMaxDataAndSort(tmp);
      maxData;
      this.initEcharts(eName, this.mapChina, tmp, false);
    },
    getAreaNumber(cityName, cityId, data) {
      //   let postData3 = {
      //   parentid: 'cityid',
      //   value: cityId,
      // }
      this.renderThirdMap(cityName, data, true);
    },
    renderThirdMap(cityName, resp, flag = false) {
      let tmp = [];
      if (flag) {
        resp.features.forEach((item) => {
          tmp.push({
            areaid: item.id,
            name: item.properties.name,
            value: Math.floor(Math.random() * 10 + 1),
          });
        });
      }
      let maxData = this.getMaxDataAndSort(tmp);
      maxData;
      this.initEcharts(cityName, this.mapChina, tmp, false);
    },
    // 航线图表
    renderScatter(map) {
      if (this.firstRender) {
        var color = ["#f0814dea"];
        var series = [];
        [["石家庄", GZData]].forEach(function(item, i) {
          series.push(
            // 涟漪散点图
            {
              name: item[0],
              type: "effectScatter",
              coordinateSystem: "geo",
              zlevel: 2,
              rippleEffect: {
                brushType: "stroke",
              },
              label: {
                normal: {
                  show: true,
                  position: "right",
                  formatter: "{b}",
                },
              },
              symbolSize: function(val) {
                return val[2] / 8;
              },
              itemStyle: {
                normal: {
                  color: color[i],
                },
              },
              data: item[1].map(function(dataItem) {
                return {
                  name: dataItem[1].name,
                  value: geoCoordMap[dataItem[1].name].concat([
                    dataItem[1].value,
                  ]),
                };
              }),
            }
          );
        });
        let option = {
          // tooltip: {
          //   trigger: "item",
          // },
          geo: {
            map: map,
            label: {
              normal: {
                show: false,
                textStyle: {
                  color: "#ddd",
                },
              },
              emphasis: {
                textStyle: {
                  color: "#000",
                },
              },
            },
            itemStyle: {
              normal: {
                areaColor: "#5ab1ef", //地图块颜色#DCE2F1  浅蓝#2B91B7
                borderColor: "#EBEBE4", //#EBEBE4灰色
                borderWidth: 0.5,
              },
              emphasis: {
                areaColor: "rgba(43, 196, 243, 0.42)", //s鼠标放上去，地图块高亮显示的颜色
              },
            },
          },
          series: series,
        };
        myChart.setOption(option);
        window.addEventListener("resize", function() {
          myChart.resize();
        });
      }
    },
    // 制作散点图
    renderCityScatter() {
      if (this.second) {
        // 金华119.682762,29.08767
        // 118.87788,29.039177
        if (isNaN(parseInt(provincesName))) {
          var chinaGeoCoordMap = {};
          var chinaDatas = [];
          if (provincesName == "jiangsu") {
            chinaGeoCoordMap = {
              // 经纬度
              南京市: [118.773101, 32.06759],
              宿迁市: [118.287324, 33.970145],
              扬州市: [119.428622, 32.403603],
              南通市: [120.900441, 31.994389],
              泰州市: [119.926122, 32.464087],
            };
            chinaDatas = [
              //航线条数
              [
                {
                  name: "宿迁市",
                  value: 0,
                },
              ],
              [
                {
                  name: "扬州市",
                  value: 0,
                },
              ],
              [
                {
                  name: "南通市",
                  value: 0,
                },
              ],
              [
                {
                  name: "泰州市",
                  value: 0,
                },
              ],
            ];
          } else {
            chinaGeoCoordMap = {};
            chinaDatas = [];
          }
          var convertDataPro = function(data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
              var dataItem = data[i];
              var fromCoord = chinaGeoCoordMap[dataItem[0].name];
              var toCoord = [118.773101, 32.06759]; //目的地
              if (fromCoord && toCoord) {
                res.push([
                  {
                    coord: fromCoord,
                    value: dataItem[0].value,
                  },
                  {
                    coord: toCoord,
                  },
                ]);
              }
            }
            return res;
          };
          var series = [];
          $.getJSON(`/map/province/${provincesName}.json`, (json) => {
            echarts.registerMap(`${provincesName}`, json);
            var symbolImg2 = "image://" + require("@/assets/logo.png"); // 中心点的图标
            //  var symbolImg2 = "image://" + require("@/assets/logo.png");
            var symbolImg = "image://" + require("@/assets/jiansheyinhang.png");
            var symbolImgPlane = "image://" + require("@/assets/wuliuche.png");
            [["南京市", chinaDatas]].forEach(function(item) {
              series.push(
                {
                  type: "lines",
                  zlevel: 2,
                  effect: {
                    show: true,
                    period: 5, //箭头指向速度，值越小速度越快
                    trailLength: 0, //特效尾迹长度[0,1]值越大，尾迹越长重
                    symbol: symbolImgPlane, //箭头图标
                    symbolSize: 20, //图标大小
                  },
                  lineStyle: {
                    normal: {
                      width: 1, //尾迹线条宽度
                      opacity: 1, //尾迹线条透明度
                      curveness: 0.3, //尾迹线条曲直度
                      color: "#f0814dea",
                    },
                  },
                  data: convertDataPro(item[1]),
                },
                {
                  type: "effectScatter", //effectScatter
                  coordinateSystem: "geo",
                  zlevel: 2,
                  rippleEffect: {
                    //涟漪特效
                    period: 20, //动画时间，值越小速度越快
                    brushType: "stroke", //波纹绘制方式 stroke, fill
                    scale: 0, //波纹圆环最大限制，值越大波纹越大
                  },
                  label: {
                    normal: {
                      show: true,
                      position: "right", //显示位置
                      offset: [5, 0], //偏移设置
                      formatter: function(params) {
                        //圆环显示文字
                        return params.data.name;
                      },
                      fontSize: 13,
                    },
                    emphasis: {
                      show: true,
                    },
                  },
                  // symbol: "circle",
                  symbol: symbolImg,
                  symbolSize: 20,
                  itemStyle: {
                    normal: {
                      show: false,
                      color: "#f00",
                    },
                  },
                  data: item[1].map(function(dataItem) {
                    return {
                      name: dataItem[0].name,
                      value: chinaGeoCoordMap[dataItem[0].name].concat([
                        dataItem[0].value,
                      ]),
                    };
                  }),
                },
                //被攻击点
                {
                  type: "scatter",
                  coordinateSystem: "geo",
                  zlevel: 2,
                  rippleEffect: {
                    period: 4,
                    brushType: "stroke",
                    scale: 4,
                  },
                  label: {
                    normal: {
                      show: true,
                      position: "right",
                      //offset:[5, 0],
                      color: "#f60",
                      formatter: "{b}",
                      textStyle: {
                        color: "#f60",
                      },
                    },
                    emphasis: {
                      show: true,
                      color: "#f60",
                    },
                  },
                  symbol: symbolImg2,
                  symbolSize: 20,
                  data: [
                    {
                      name: item[0],
                      value: chinaGeoCoordMap[item[0]].concat([10]),
                    },
                  ],
                }
              );
            });
            let option = {
              geo: {
                show: true,
                map: provincesName,
                label: {
                  normal: {
                    show: false,
                    textStyle: {
                      color: "#ddd",
                    },
                  },
                  emphasis: {
                    textStyle: {
                      color: "#000",
                    },
                  },
                },
                roam: false,
                itemStyle: {
                  normal: {
                    areaColor: "#5ab1ef", //地图块颜色#DCE2F1  浅蓝#2B91B7
                    borderColor: "#EBEBE4", //#EBEBE4灰色
                    borderWidth: 0.5,
                  },
                  emphasis: {
                    areaColor: "rgba(43, 196, 243, 0.42)", //s鼠标放上去，地图块高亮显示的颜色
                  },
                },
                // itemStyle: {
                //   normal: {
                //     areaColor: "transparent",
                //     borderColor: "#3fdaff",
                //     borderWidth: 2,
                //     shadowColor: "rgba(63, 218, 255, 0.5)",
                //     shadowBlur: 30,
                //   },
                //   emphasis: {
                //     areaColor: "#2B91B7",
                //   },
                // },
              },
              series: series,
              // 初始动画的时长，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果：
              animationDuration: 1000,
              animationEasing: "cubicOut",
              // 数据更新动画的时长。
              animationDurationUpdate: 1000,
            };
            myChart.setOption(option);
          });
        } else {
          if (provincesName == "320100") {
            // 经纬度
            var geoCoordMapcityArr = {
              "建设银行-陆行路支行": [118.859213, 31.955096],
              "建设银行-知行路支行": [119.03325, 31.656299],
              "建设银行-平行路路支行": [118.83265, 32.325738],
              "建设银行-过行路支行": [118.623588, 32.063593],
              "建设银行-平行路支行": [118.758693, 31.760514],
              窍楚: [118.788588, 32.072405], // 目标值
            };
            var datacity = [
              //航线条数
              [
                {
                  name: "建设银行-陆行路支行",
                  value: 0,
                },
              ],
              [
                {
                  name: "建设银行-知行路支行",
                  value: 0,
                },
              ],
              [
                {
                  name: "建设银行-平行路路支行",
                  value: 0,
                },
              ],
              [
                {
                  name: "建设银行-过行路支行",
                  value: 0,
                },
              ],
              [
                {
                  name: "建设银行-平行路支行",
                  value: 0,
                },
              ],
              // { name: "窍楚", value: 300 },
            ];
            chinaGeoCoordMap = {};
            chinaDatas = [];
          } else {
            (geoCoordMapcityArr = {}), (datacity = []);
            chinaGeoCoordMap = {};
            chinaDatas = [];
          }

          var convertDatacity = function(data) {
            var res = [];
            var symbolImg = "image://" + require("@/assets/jiansheyinhang.png");
            var symbolImg2 = "image://" + require("@/assets/logo.png"); // 中心点的图标
            symbolImg2;
            symbolImg;
            // var toCenterCoord=[]
            for (var i = 0; i < data.length; i++) {
              var dataItem2 = data[i];
              var geoCoord = geoCoordMapcityArr[dataItem2[0].name];
              var toCoord2 = [118.788588, 32.072405]; //目的地
              if (geoCoord && toCoord2) {
                res.push([
                  {
                    coord: geoCoord,
                    value: dataItem2[0].value,
                  },
                  {
                    coord: toCoord2,
                  },
                ]);
              }
            }
            return res;
          };
          $.getJSON(`/map/city/${provincesName}.json`, (json) => {
            var series = [];
            var symbolImg2 = "image://" + require("@/assets/logo.png");
            var symbolImg = "image://" + require("@/assets/jiansheyinhang.png");
            var symbolImgPlane = "image://" + require("@/assets/wuliuche.png");
            echarts.registerMap(`${provincesName}`, json);
            [["窍楚", datacity]].forEach(function(item) {
              series.push(
                {
                  type: "lines",
                  zlevel: 2,
                  effect: {
                    show: true,
                    period: 5, //箭头指向速度，值越小速度越快
                    trailLength: 0, //特效尾迹长度[0,1]值越大，尾迹越长重
                    symbol: symbolImgPlane, //箭头图标
                    symbolSize: 20, //图标大小
                    // color: "blue", // 图标的颜色
                  },
                  lineStyle: {
                    normal: {
                      width: 1, //尾迹线条宽度
                      opacity: 1, //尾迹线条透明度
                      curveness: 0.3, //尾迹线条曲直度
                      color: "#f0814dea",
                    },
                  },
                  data: convertDatacity(item[1]),
                },
                {
                  type: "scatter",
                  coordinateSystem: "geo",
                  zlevel: 2,
                  label: {
                    normal: {
                      show: true,
                      position: "right", //显示位置
                      offset: [5, 0], //偏移设置
                      formatter: function(params) {
                        //圆环显示文字
                        return params.data.name;
                      },
                      fontSize: 12,
                    },
                    emphasis: {
                      show: true,
                    },
                  },
                  symbol: symbolImg,
                  symbolSize: 20,
                  // symbolSize: function(val) {
                  //   return 5 + val[2] * 5; //圆环大小
                  // },
                  itemStyle: {
                    normal: {
                      show: false,
                      color: "#ccc",
                    },
                  },
                  data: item[1].map(function(dataItem) {
                    return {
                      name: dataItem[0].name,
                      value: geoCoordMapcityArr[dataItem[0].name].concat([
                        dataItem[0].value,
                      ]),
                    };
                  }),
                },
                //被攻击点
                {
                  type: "scatter",
                  coordinateSystem: "geo",
                  zlevel: 2,
                  rippleEffect: {
                    period: 4,
                    brushType: "stroke",
                    scale: 4,
                  },
                  label: {
                    normal: {
                      show: true,
                      position: "right",
                      //offset:[5, 0],
                      color: "#f60",
                      formatter: "{b}",
                      textStyle: {
                        color: "#f60",
                      },
                    },
                    emphasis: {
                      show: true,
                      color: "#f60",
                    },
                  },
                  symbol: symbolImg2,
                  symbolSize: 30,
                  data: [
                    {
                      name: item[0],
                      value: geoCoordMapcityArr[item[0]].concat([10]),
                    }
                  ]
                }
              );
            });
            let option = {
              geo: {
                show: true,
                map: provincesName,
                label: {
                  normal: {
                    show: false,
                    textStyle: {
                      color: "#ddd",
                    },
                  },
                  emphasis: {
                    textStyle: {
                      color: "#000",
                    },
                  },
                },
                roam: false,
                itemStyle: {
                  normal: {
                    areaColor: "#5ab1ef", //地图块颜色#DCE2F1  浅蓝#2B91B7
                    borderColor: "#EBEBE4", //#EBEBE4灰色
                    borderWidth: 0.5,
                  },
                  emphasis: {
                    areaColor: "rgba(43, 196, 243, 0.42)", //s鼠标放上去，地图块高亮显示的颜色
                  },
                },
                // itemStyle: {
                //   normal: {
                //     areaColor: "transparent",
                //     borderColor: "#3fdaff",
                //     borderWidth: 2,
                //     shadowColor: "rgba(63, 218, 255, 0.5)",
                //     shadowBlur: 30,
                //   },
                //   emphasis: {
                //     areaColor: "#2B91B7",
                //   },
                // },
              },
              series: series,
            };
            myChart.setOption(option);
          });
        }
      }
    }
 
  },
};
</script>

<style scoped lang="scss">

.refrashDate {
  color: #fff;
  width: 50%;
  cursor: pointer;
  font-size: 0.25rem;
}

.refrashDate a:hover {
  color: rgb(49, 153, 214);
}

#container {
  width: 100%;
  height: 6rem;
  margin: 0px auto 0;
}




</style>
